<!DOCTYPE html>
<html>
	<!--
	作者：github.com/WangEn
	时间：2018-02-02
	描述：修改form样式
-->
	<head>
		<meta charset="UTF-8">
		<title>我的课程</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<script src="../../static/js/jquery-1.11.1.min.js"></script>
		<script src="../../static/js/common.js" charset="utf-8"></script>

	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">学生操作</a>
        <a>
          <cite>我的课程</cite></a>
      </span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="weadmin-body">
			<div class="layui-row" id="search">
				<form class="layui-form layui-col-md12 we-search">
					<div class="layui-inline">
						<input type="text" name="username" placeholder="请输入课程名" autocomplete="off" class="layui-input">
					</div>
					<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
				</form>
			</div>
			<table class="layui-hide" id="scheduleList" lay-filter="schedulebar"></table>
			<script type="text/html" id="scheduleOpBar">
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail">课程详情</a>
			</script>
			<div id="editForm" style="display: none;">
				<form class="layui-form">
					<div class="layui-form-item" pane>
						<label  class="layui-form-label">
							<span for="course" class="we-red">*</span>选择课程
						</label>
						<div class="layui-input-inline">
							<select id="course" name="course" lay-verify="required" lay-filter="department" disabled>

							</select>
						</div>
					</div>

					<div class="layui-form-item" pane>
						<label  class="layui-form-label">
							<span for="teacher" class="we-red">*</span>授课教师
						</label>
						<div class="layui-input-inline">
							<select id="teacher" name="teacher" lay-verify="required" lay-filter="department" disabled>

							</select>
						</div>
					</div>
					<div class="layui-form-item" id="locationAndtimeBT">
						<label  class="layui-form-label">
							时间地点
						</label>
						<div class="layui-btn-group">

						</div>
					</div>

					<div class="layui-form-item layui-form-hide" id="locationAndtime0">

					</div>

				</form>
			</div>

		</div>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<script>

            layui.extend({
                admin: '{/}../../static/js/admin'
            });

            layui.use(['table', 'jquery','form', 'admin','layer'], function() {
                var table = layui.table,
                    $ = layui.jquery,
                    form = layui.form,
                    layer = layui.layer,
                    admin = layui.admin;
                //用userid请求得到studentId
                function getStudentID() {
                    var userInfo = JSON.parse(window.sessionStorage.getItem("scs_user"));
                    var studentID = -1;
                    var role = encodeURI(userInfo.roles[0].role);
                    var userID = userInfo.id;
                    $.ajax({
                        url: remoteUrl + "user/getByRoleAndUserID?role="+role+"&userID="+userID,
                        type: "GET",
                        contentType: "application/json;charset=utf-8",
                        async: false,
                        success: function (json) {
                            studentID = json.result;
                        }
                    });
                    if(studentID == -1){
                        layer.msg("请重新登录后查看");
					}

                    return studentID;
                }
                //这个请求放在学生（我的选课信息页面）表示学生的所选的选课信
                $.ajax({
                    url: remoteUrl + "schedule/getScheduleByStudentID/" + getStudentID(),
                    type: "GET",
                    contentType: "application/json;charset=utf-8",
                    async: false,
                    success: function (json) {
                            table.render({
                                elem: '#scheduleList',
                                cellMinWidth: 80,
                                cols: [
                                    [ {
                                        field: 'id',title: '选课编码',width:100
                                    },{
                                        field: 'name',title: '课程名称', templet: function (res) {
                                            return  res.course.courseName ;
                                        }
                                    },{
                                        field: 'courseScore',title: '课程学分',templet: function (res) {
                                            return   res.course.courseScore ;
                                        }
                                    },{
                                        field: 'username',title: '授课教师',templet: function (res) {
                                            return   res.teacher.user.username ;
                                        }
                                    },{
                                        field: 'location',title: '授课地点',templet: function (res) {
                                            var locations = res.location.split("@");
                                            var loc = '';
                                            for(i=1;i<locations.length;i++){
                                                loc = loc+"["
                                                loc = loc+locations[i];
                                                loc = loc+"]";
                                                loc = loc+"\n";
                                            }
                                            return loc ;
                                        }
                                    },{
                                        field: 'time',title: '上课时间',templet: function (res) {
                                            var times = res.time.split("@");
                                            var tim = '';
                                            for(i=1;i<times.length;i++){
                                                tim = tim+"["
                                                tim = tim+times[i];
                                                tim = tim+"]";
                                                tim = tim+"\n";
                                            }
                                            return tim ;
                                        }
                                    },{
                                        field: 'chooseNumber',title: '规定人数',width:100, templet: function (res) {
                                            return '<em>' + res.course.chooseNumber + '</em>'
                                        }
                                    },{
                                        fixed:'right',field: 'operate',title: '操作',align:'center',toolbar: '#scheduleOpBar',width:200
                                    }]
                                ],
                                data: json.result,
                                event: true,
                                page: true,
								text:{
                                    none: '还未选择任何课程'
                                }
                            });

                            //监听工具条
                            table.on('tool(schedulebar)', function(obj){
                                var data = obj.data;
                                if(obj.event === 'detail'){



                                    layer.open({
                                        type: 1,
                                        fix: false, //不固定
                                        maxmin: true,
                                        shadeClose: true,
                                        area: [600 + 'px', 500 + 'px'],
                                        shade: 0.4,
                                        title: "编辑",
                                        content: $('#editForm'),
                                        success: function () {
                                            //加载课程信息
                                            $.ajax({
                                                url: "http://localhost:9001/course",
                                                type: 'get',//method请求方式，get或者post
                                                dataType: 'json',//预期服务器返回的数据类型
                                                contentType: "application/json; charset=utf-8",
                                                async: false,
                                                success: function (res) {//res为相应体,function为回调函数
                                                    var result = res.result;
                                                    var i = 0;
                                                    var op = "";
                                                    $('#course').append('<option value="">请选择</option>');
                                                    for (i; i < result.length; i++) {
                                                        op += '<option value=' + result[i].id + '>' + result[i].courseName + '</option>';
                                                    }
                                                    $('#course').append(op);
                                                    $('#course').find('option[value=' + data.course.id + ']').attr("selected", true);
                                                    form.render();
                                                }
                                            });

                                            //加载教师信息
                                            $.ajax({
                                                url: "http://localhost:9001/teacher",
                                                type: 'get',//method请求方式，get或者post
                                                dataType: 'json',//预期服务器返回的数据类型
                                                contentType: "application/json; charset=utf-8",
                                                async: false,
                                                success: function (res) {//res为相应体,function为回调函数
                                                    var result = res.result;
                                                    var i = 0;
                                                    var op = "";
                                                    $('#teacher').append('<option value="">请选择</option>');
                                                    for (i; i < result.length; i++) {
                                                        op += '<option value=' + result[i].id + '>' + result[i].user.username + '</option>';
                                                    }
                                                    $('#teacher').append(op);
                                                    $('#teacher').find('option[value=' + data.teacher.id + ']').attr("selected", true);
                                                    form.render();
                                                }

                                            });
                                            var locations = data.location.split("@");
                                            var times = data.time.split("@");
                                            var locationChoose = "";
                                            var timeChoose = "";
                                            for(var lTNumber=0,i=1;lTNumber<locations.length-1;lTNumber++,i++) {
                                                var addflag = '#locationAndtime' + lTNumber;
                                                locationChoose = "<option value="+locations[i]+">"+locations[i]+"</option>";
                                                timeChoose = "<option value="+times[i]+">"+times[i]+"</option>";
                                                $(addflag).after(
                                                    '<div class="layui-form-item layui-form-text" id="locationAndtime' + (lTNumber+1) + '">'
                                                    + '<label  class="layui-form-label"></label>'
                                                    + '<div class="layui-input-inline">'
                                                    + '<select id="location' + (lTNumber+1) + '" name="" lay-verify="required" lay-filter="" disabled>' + locationChoose + '</select>'
                                                    + '</div>'
                                                    + '<div class="layui-input-inline"></div>'
                                                    + '<div class="layui-input-inline">'
                                                    + '<select id="time' + (lTNumber+1) + '" name="" lay-verify="required" lay-filter="" disabled>' + timeChoose + '</select>'
                                                    + '</div>'
                                                    + '</div>'
                                                );
                                            }
                                            form.render();
                                        },
                                        end:function () {
                                            var delflag;
                                            for(var i=1;i<=10;i++){
                                                delflag = '#locationAndtime'+i;
                                                $(delflag).remove();
                                            }
                                        }
                                    })



                                }else if(obj.event === 'choose'){
                                }
                            });
						}
                });
            });

			//alert(window.sessionStorage.getItem("scs_user"));
		</script>
	</body>

</html>